﻿@{
    ViewBag.Title = "基础表格";
    ViewBag.PageHead = NameValueList.Add(
        ViewBag.Title, ViewBag.Title,
        "控制台", Url.Action("Index", "Admin"),
         "表格", Url.Action("Index", "AdminTable"),
         ViewBag.Title, "javascript:;"
        );
}
@section Head{
    <link rel="stylesheet" href="~/Content/DT_bootstrap.css" />
}

<div class="span12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box light-grey">
        <h4>HTML拼接所有数据,调用初始化函数完成前端分页排序及搜索</h4>
        <p>更多查看官网API:<a href="https://www.datatables.net"></a></p>
        <table class="table table-striped table-bordered table-hover" id="sample">
            <thead>
                <tr>
                    <th>Username</th>
                    <th class="hidden-480">Email</th>
                    <th class="hidden-480">Points</th>
                    <th class="hidden-480">Joined</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < 100; i++)
                {
                    <tr>
                        <td>
                            Name@(i)
                        </td>
                        <td>
                            Email@(i)
                        </td>
                        <td>
                            Points@(i)
                        </td>
                        <td>
                            Joined@(i)
                        </td>
                        <td>
                            <button class="btn">按钮</button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

@section scripts{
<script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="~/Scripts/DT_bootstrap.js"></script>
    <script>
        $(function () {
            Index.initMenu("3-1");
            $("#sample").dataTable({
                language:Index.tableLanguage("用户名/Email关键字搜索  ")
            });
        });
    </script>
}
